<template>
    <div>
        <div class="nav-box">
            <div class="item-font" v-show="!showList">
                <i  class="iconfont icon-message"></i>
            </div>
            <div class="item-font" v-show="showList"  @click="showList=false">
                <i  class="iconfont icon-left"></i>
            </div>
            <div class="item-input">
                <i class="iconfont icon-search"></i>
                <input type="text" :placeholder="sketch" v-model="word" @focus="showList=true"/>
            </div>
            <div class="item-font" v-show="!showList">
                <i class="iconfont icon-cart"></i>
            </div>
            <div class="item-font" v-show="showList">
                <i class="iconfont btn-font" @click="searchKeyWord(word)">搜索</i>
            </div>
        </div>
        <div class="word-box" v-show="showList">
            <div>
                <div class="keys line">
                    <div class="title">
                        <i class="iconfont icon-search"></i>
                        <span>历史记录</span>
                        <i class="iconfont icon-trash" @click="clearHistoryData()"></i>
                    </div>
                    <ul class="list"  v-if="history.length!=0">
                        <li v-for="(item, index) in history" :key="'history'+index" @click="searchKeyWord(item)">{{ item }}</li>
                    </ul>
                    <p class="tip" v-if="history.length==0">暂无记录</p>
                </div>
                <div class="keys">
                    <div class="title">
                        <i class="iconfont icon-star"></i>
                        <span>热门搜索</span>
                    </div>
                    <ul class="list" v-if="hotWord.length!=0">
                        <li v-for="(item, index) in hotWord" 
                            :key="'hotword'+index" 
                            :style="'color:'+item.color"
                            @click="searchKeyWord(item.query)"
                        >{{ item.query }}</li>
                    </ul>
                    <p class="tip" v-if="hotWord.length==0">暂无记录</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState,mapActions, mapMutations } from "vuex";
export default {
    data(){
        return {
            showList:false,
            history:[],
            word:""
        }
    },
    computed:{
        ...mapState(["hotWord","sketch"])
    },
    methods:{
        ...mapMutations(["setsketch"]),
        ...mapActions(["loadSearchData"]),
        loadHistoryData(){
            let history = localStorage.getItem("historyDatas")||"[]";
            this.history = JSON.parse(history);
        },
        setHistoryData(word){
            if(this.history.indexOf(word)==-1){
                this.history.push(word);
                localStorage.setItem("historyDatas",JSON.stringify(this.history));
            }
        },
        clearHistoryData(){
            this.history = [];
            localStorage.setItem("historyDatas",JSON.stringify(this.history));
        },
        searchKeyWord(word){
            if(word==""){
                word = this.sketch;
            }
            this.word = "";
            this.setsketch(word);
            this.setHistoryData(word);
            this.showList = false;
            this.$router.push({
                name:"list",
                query:{
                    q:word
                }
            })
        }
    },
    mounted(){
        this.loadSearchData();
        this.loadHistoryData();
    }
};
</script>
<style lang="less" scoped>
.btn-font{
    font-size: 34px!important;
    font-weight: 600!important;
}
.nav-box {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    text-align: center;
    border-bottom: 1px solid @66;
    height: @h;
    align-items: center;
    box-sizing: border-box;
    .item-font {
        width: @h;
        height: @h;
        box-sizing: border-box;
        line-height: @h;
        > i {
            font-size: 52px;
        }
    }
    .item-input {
        flex-grow: 1;
        position: relative;
        box-sizing: border-box;
        padding: 24px 0px;
        > input {
            display: block;
            background-color: @de;
            width: 100%;
            height: @h - (24 * 2);
            border: none;
            outline: none;
            border-radius: 12px;
            padding-left: 50px;
            font-size: 28px;
            box-sizing: border-box;
            color: @gray;
        }
        > i {
            position: absolute;
            display: inline-block;
            width: 20px;
            height: 20px;
            padding: 0px 10px;
            line-height: @h;
            left: 0px;
            top: 0px;
            font-size: 28px;
            color: @66;
        }
    }
}
.word-box {
    position: absolute;
    top: @h;
    left: 0px;
    bottom: 0px;
    width: 100%;
    background-color: white;
    z-index: 999;
    box-sizing: border-box;
    padding: @padding-size*2;
    .keys{
        color: @font;
        margin-bottom: 20px;
        padding-bottom: 20px;
        .title{
            font-size: 36px;
            margin-bottom: 20px;
            .iconfont{
                font-size: 36px;
            }
            span{
                padding-left: 20px;
                font-size: 34px;
            }
            .iconfont:last-child{
                float: right;
            }
        }
        .list{
            list-style: none;
            padding: 0px;
            margin-left: 54px;
            li{
                display: inline-block;
                padding: 10px;
                border: 1PX solid @font;
                margin-right: 10px;
                margin-bottom: 10px;
                border-radius: 6px;
                font-size: 28px;
                cursor: pointer;
            }
        }
        .tip{
            margin-left: 54px;
            font-size: 32px;
            color: @99;
        }
    }
    .line{
        border-bottom: 1PX solid @99;
    }
}
</style>
